﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="jQuery Accordion, Expander, Toggle Bar, Expander Bar, Navigation Bar, Accordion, jqxNavigationBar, jqxExpander" /> 
    <meta name="description" content="In this demo is demonstrated how to create multiple nested Navigation Bars." />
    <title id='Description'>In this demo is demonstrated how to create multiple nested Navigation Bars.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
     <script type="text/javascript" src="../../scripts/gettheme.js"></script>
   <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>
    <style type="text/css">
        #jqxNavigationBar
        {
            border: 1px solid #cccccc;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }
        .jqx-navigationbar
        {
            border: none;
        }
        .main-header
        {
            color: #696969;
            font-size: 13px;
            background: none;
            border: 0px solid #cccccc;
            border-bottom-width: 1px;
            font-weight: bold;
            margin-bottom: 0px;
            border-radius: 0px;
            -moz-border-radius: 0px;
        }
        .main-content
        {
            border: 0px solid #cccccc;
            border-bottom-width: 1px;
            margin: 0px;
            padding: 0px;
            background: none;
        }
        .sub-header
        {
            color: #696969;
            font-size: 11px;
            background: none;
            border: 0px solid #cccccc;
            border-bottom-width: 0px;
            margin-top: 1px;
            margin-bottom: 0px;
            border-radius: 0px;
            -moz-border-radius: 0px;
        }
        .jqx-expander-header a
        {
            color: #000;
            text-decoration: none;
            font-family: Arial;
        }
        .jqx-expander-header a:hover
        {
            text-decoration: underline;
        }
        .content-style
        {
            margin: 0px;
            padding: 0px;
            border: 0px solid black;
            background: none;
        }
        .jqx-expander-header-expanded
        {
            background-color: #696969;
            color: #fff;
            text-decoration: none;
            border-bottom-width: 0px;
        }
        .jqx-expander-header-expanded a
        {
            color: #fff;
        }
        .jqx-expander-header-expanded a:hover
        {
            text-decoration: none;
        }
        .jqx-expander-arrow-bottom
        {
            background-image: url(../../Styles/images/icon-up-white.png);
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            /*
            * Creating all navigation bars. Order of creating doesn't matterns
            */
            $("#jqxNavigationBar").jqxNavigationBar({ expandMode: 'single', arrowPosition: 'left', height: 400, width: 300 });
            $("#firstNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#fifthNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#thirteenthNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#twelfthNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#eleventhNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#tenthNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#ninthNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#eighthNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#seventhNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#sixthNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#fourthNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#thirdNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });
            $("#secondNestedNavigationBar").jqxNavigationBar({ expandMode: 'toggle', arrowPosition: 'left' });

            /*
            * Hiding the arrowrs of all navigation bar items which doesn't have content.
            */
            (function hideArrows(navigationBar) {
                if (!navigationBar) {
                    return;
                }
                var childrenCount = navigationBar.children().length;
                for (var i = 0; i < childrenCount; i++) {
                    try {
                        var element = navigationBar.jqxNavigationBar('getContentAt', i);
                        var content = element != null ? $.trim(element.replace(/<!--[\s\S]*?-->/g, '')) : '';
                        if (content === '') {
                            navigationBar.jqxNavigationBar('hideArrowAt', i);
                        } else {
                            if (content != null) {
                                hideArrows($('#' + $(content).attr('id')));
                            }
                        }
                    }
                    catch (error) {
                        var er = error;
                    }
                }
            })($("#jqxNavigationBar"));

            $("#jqxNavigationBar").jqxNavigationBar('expandAt', 1);
        });
    </script>
</head>
<body>
    <div style='width: 300px;' id='jqxWidget'>
        <!-- Root navigation bar -->
        <div id="jqxNavigationBar">
            <div class="jqx-expander-header main-header" style="border-top-left-radius: 4px;
                border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px;
                -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px;">
                <a href="#">Intelligence</a>
            </div>
            <div class="jqx-expander-content main-content">
                <!-- Intelligence sub navigation bar -->
                <div id="firstNestedNavigationBar" style="margin-left: 25px;">
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Daily Alerts</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Weekly Alerts</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Monthly Alerts</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                </div>
                <!-- End of Intelligence sub navigation bar -->
            </div>
            <div class="jqx-expander-header main-header">
                <a href="#">Visitors</a>
            </div>
            <div class="jqx-expander-content main-content">
                <!-- Visitors sub navigation bar -->
                <div id="secondNestedNavigationBar" style="margin-left: 25px;">
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Visitor Tending</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                        <!-- Visitor Tending sub navigation bar -->
                        <div id="thirdNestedNavigationBar" style="margin-left: 25px;">
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Visits</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Absolute Unique Visitors</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Pageviews</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Bonuce Rate</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                        </div>
                        <!-- End of Visitir Tending sub navigation bar -->
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Visitor Loyalty</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                        <!-- Visitor Loyalty sub navigation bar -->
                        <div id="fourthNestedNavigationBar" style="margin-left: 25px;">
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Loyalty</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Recency</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Length of Visit</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                        </div>
                        <!-- End of Visitor Loyalty sub navigation bar -->
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Browser Capabilities</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                        <!-- Browser Capabilities sub navigation bar -->
                        <div id="fifthNestedNavigationBar" style="margin-left: 25px;">
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Browsers</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Operating Systems</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                        </div>
                        <!-- End of Browser Capabilities sub navigation bar -->
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Network Providers</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                        <!-- Network Providers sub navigation bar -->
                        <div id="sixthNestedNavigationBar" style="margin-left: 25px;">
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Service Providers</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                        </div>
                        <!-- End of Network Providers sub navigation bar -->
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">User-Defined</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Custom Variables</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                </div>
                <!-- End of Visitors sub navigation bar -->
            </div>
            <div class="jqx-expander-header main-header">
                <a href="#">Traffic Sources</a>
            </div>
            <div class="jqx-expander-content main-content">
                <!-- Traffic Sources sub navigation bar -->
                <div id="eighthNestedNavigationBar" style="margin-left: 25px;">
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Overview</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">AdWords</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                        <!-- AdWords sub navigation bar -->
                        <div id="ninthNestedNavigationBar" style="margin-left: 25px;">
                            <div class="jqx-expander-header sub-header">
                                <a href="#">AdWords Campaigns</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                        </div>
                        <!-- End of AdWords sub navigation bar -->
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Keywords</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                </div>
                <!-- End of Traffic Sources sub navigation bar -->
            </div>
            <div class="jqx-expander-header main-header">
                <a href="#">Content</a>
            </div>
            <div class="jqx-expander-content main-content">
                <!-- Content sub navigation bar -->
                <div id="tenthNestedNavigationBar" style="margin-left: 25px;">
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Overview</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">In-Page Analytics</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Site Search</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                        <!-- Site Search sub navigation bar -->
                        <div id="eleventhNestedNavigationBar" style="margin-left: 25px;">
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Overview</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Usage</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Search Terms</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Start Pages</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                        </div>
                        <!-- End of Site Search sub navigation bar -->
                    </div>
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Event Tracking</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                        <!-- Event Tracking sub navigation bar -->
                        <div id="twelfthNestedNavigationBar" style="margin-left: 25px;">
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Overview</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                            <div class="jqx-expander-header sub-header">
                                <a href="#">Categories</a>
                            </div>
                            <div class="jqx-expander-content content-style">
                            </div>
                        </div>
                        <!-- End of Event Tracking sub navigation bar -->
                    </div>
                </div>
                <!-- End of Content sub navigation bar -->
            </div>
            <div class="jqx-expander-header main-header" style="border-bottom-width: 0px">
                <a href="#">Goals</a>
            </div>
            <div class="jqx-expander-content content-style">
                <!-- Goals sub navigation bar -->
                <div id="thirteenthNestedNavigationBar" style="margin-left: 25px;">
                    <div class="jqx-expander-header sub-header">
                        <a href="#">Overview</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                    <div class="jqx-expander-header sub-header" style="border-bottom-width: 0px">
                        <a href="#">Total Conversions</a>
                    </div>
                    <div class="jqx-expander-content content-style">
                    </div>
                </div>
                <!-- End of Goals sub navigation bar -->
            </div>
        </div>
        <!-- End of the root navigation bar -->
    </div>
</body>
</html>
